{% extends 'base.html' %}
{% block page_content %}
    {#{% import "bootstrap/wtf.html" as wtf %}#}
    {#    {{ wtf.quick_form(form) }}#}
    {% if name %}
        <h1>欢迎{{ name }}！！！</h1>
    {% else %}
        <h1 style="display: inline-block">请先登录!!</h1><h3 style="display: inline-block"><a href="/login/">登录</a></h3>

    {% endif %}


    {% if name %}
        <h2>我的电话簿</h2>
        <div>
            <div class="btn-group" role="group" aria-label="...">
                <a href="/insert_telbook/">
                    <button type="button" class="btn btn-success">新建联系人</button>
                </a>
                <a href="/type/">
                    <button type="button" class="btn btn-info">新增类别</button>
                </a>

            </div>
            <div style="float: right">
                <form class="form-inline" action="" method="post">

                    <input type="text" class="form-control" id="te1" placeholder="姓名"
                           style="display: inline-block" value="" >
                    <a  class="btn btn-info aaa" >aaa</a>
                </form>
            </div>
        </div>

        <table class="table table-striped table-bordered" style="margin-top: 5px;text-align: center;" >
            <thead>
            <th style="text-align: center">姓名</th>
            <th style="text-align: center">电话</th>
            <th style="text-align: center">类型</th>
            <th style="text-align: center">操作</th>
            </thead>
            <tbody>
            {% for foo in book %}
                <tr>
                    <input type="hidden" value="{{ foo.id }}">
                    <td class="username">{{ foo.name }}</td>
                    <td>{{ foo.tel }}</td>
                    <td>{{ foo.type }}</td>
                    <td colspan="2"><a href="/update/{{ foo.id }}">
                        <button type="button" class="btn btn-info">修改</button>
                    </a>
                        <a href="/delete/{{ foo.id }}">
                            <button type="button" class="btn btn-danger">删除</button>
                        </a>
                    </td>

                </tr>
            {% endfor %}

            </tbody>
        </table>
    {% endif %}

{% endblock %}
{% block scripts %}
    {{ super() }}
<script>


    $('.aaa').click(function () {
        var $username = $('.username').text();
        var $name = $('.form-control').val();
       $.ajax({
           url: '/',
           method: 'get',
           data: {'username':$name},
           success: function (data) {

           }

       })
    })
</script>
{% endblock %}